<template>
  <div class="user-info">
    <!-- 个人信息 -->
    <el-form
      ref="userForm"
      label-width="220px"
      :rules="rules"
      :model="userInfo"
    >
      <!--手机 -->
  
      <el-form-item
        label="手机"
        prop="mobile"
      >
        <el-input
          v-model="userInfo.mobile"
          style="width:220px"
        />
      </el-form-item>
  
      <!-- 工号 入职时间 -->
  
      <el-form-item
        label="入职时间"
        prop="timeOfEntry"
      >
        <el-date-picker
          v-model="userInfo.timeOfEntry"
          type="date"
          class="inputW"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
  
      <!-- 员工照片 -->
  
      <el-form-item label="员工头像">
        <!-- 放置上传图片 -->
        <UploadImg v-model="userInfo.staffPhoto" />
      </el-form-item>
  
      <!-- 保存个人信息 -->
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit(userForm)"
        >
          保存更新
        </el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { getProfileById } from '@/api/user'
import { saveUserDetailById } from '@/api/employees'
import {  FormInstance, FormRules } from 'element-plus'
import router from '@/router'
//绑定from组件实例
const userForm = ref<FormInstance>()
//表单验证数
let userInfo=reactive({
  mobile: '',
  timeOfEntry: '',
  staffPhoto:'',
})
const rules = reactive<FormRules>({
  mobile: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  timeOfEntry: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
})
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid) => {
    if(!valid) return false
    updateUserDetailById()
    router.back()
  })
}
const route =useRoute()
const loadProfileById =async() => {
  try {
    const id =route.query.id as string
    const res = await getProfileById(id)
    console.log('getProfileById',res)
    userInfo =Object.assign(userInfo ,res.data,{ password :'' })
  } catch (error) {
    console.log(error)
  }
}
loadProfileById()
const updateUserDetailById =async() => {
  try {
    const res = await saveUserDetailById(userInfo)
    console.log('saveUserDetailById',res)
  } catch (error) {
    console.log(error)
  }
}
</script>